<template>
  <div class="el-input">
    <template v-if="handleClick">
      <input type="text" v-bind="$attrs" :value="value" @input="handleClick" />
    </template>
  </div>
</template>

<script>
// 防抖函数
const debounce = (callback, time = 500) => {
  let timer = null
  return (e) => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      callback && callback(e)
    }, time)
  }
}
// 如果使用v-model封装el-input组件
export default {
  props: ['value'],
  data() {
    return {
      handleClick: null,
    }
  },
  inheritAttrs: false, // 默认是true, 静止基础属性在根元素上
  created() {
    // $attrs就是默认获取vue传递的属性
    console.log(this.$attrs)
  },
  mounted() {
    this.handleClick = debounce((e) => this.onInput(e))
  },
  methods: {
    // 防抖函数: 利用必包这个性质 （函数套函数的形式）
    onInput($event) {
      if ($event) {
        this.$emit('input', $event.target.value)
      }
    },
  },
}
</script>

<style></style>
